<template>
	<view>
		<map class="map" longitude="111.02" latitude="35.02"></map>
		<form @submit="handleSubmit">
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="cuIcon-friendfill"></text>
				</view>
				<input name="username" :value="addrdata.username" class="text-right" placeholder="请输入姓名"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-mobilefill"></text>
				</view>
				<input name="phone" :value="addrdata.phone" class="text-right" placeholder="请输入电话"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-locationfill"></text>
				</view>
				<picker name="regionIdx" :range="regionArr" @change="dochg">
					<view class="picker">
						{{regionIdx==-1?"请选择区域":regionArr[regionIdx]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">
					<text class="cuIcon-locationfill"></text>
				</view>
				<input name="detail" :value="addrdata.detail" class="text-right" placeholder="请输入详细地址"></input>
			</view>
			<view class="padding">
				<button form-type="submit" class="cu-btn bg-brown block">
					确定
				</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				regionArr:[
					'方北区',
					'南山区',
					'怀南区',
					'光明区',
					'苏清风区'
				],
				regionIdx:-1,
				idx:-1
			}
		},
		onLoad(e) {
			// 有参数，说明有传值，是修改，这里接收一下下标
			if (e.idx) {
				this.idx = e.idx;
			};
			// 把数据中的区域下标拿出来给本地，因为无法通过computed源数据驱动页面变化
			this.regionIdx = this.addrdata.regionIdx;
		},
		computed: {
			addrdata() {
				// 如果有下标，说明是修改，直接把原数据先渲染上
				if (this.idx>=0) {
					return this.$store.state.addr.addrlist[this.idx]
				}else{
					return {
						username:"",
						phone:"",
						detail:"",
						city:"苏州",
						regionIdx:-1,
						isdefault:false
					}
				}
			}
		},
		methods: {
			dochg(v){
				// console.log(v.detail.value);
				this.regionIdx = v.detail.value;
			},
			handleSubmit(v){
				// console.log(v.detail.value);
				let {regionIdx,idx} = this;
				// 没选地址，默认给一个，最好提示让选择一下再通过？
				if (regionIdx<0) {
					regionIdx = 0;
				}
				let {city,isdefault} = this.addrdata;
				let addobj = {
					...v.detail.value,
					city,
					region:this.regionArr[regionIdx],
					// regionIdx, 在上面加上name后，也可获取到
					isdefault,
					idx
					
				};
				// this.$store.commit("doadd",addobj);
				this.$store.dispatch("doaddact",addobj);
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>
	
<style scoped>
	.map{
		height: 400upx;
		width: 100%;
	}
</style>
